<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./styles/base.css" />
    <link rel="stylesheet" href="./styles/index.css" />
  </head>
  <body>
    <section class="todoapp">
      <!-- {/* 头部 */} -->
      <header class="header">
        <h1>todos</h1>
        <input class="new-todo" placeholder="需要做什么" autofocus />
      </header>
      <!-- {/* 主体 */} -->
      <section class="main">
        <input id="toggle-all" class="toggle-all" type="checkbox" />
        <label for="toggle-all">全选</label>
        <ul class="todo-list">
          <li class="completed">
            <div class="view">
              <input id="togglec" class="toggle" type="checkbox" />
              <label for="togglec">吃饭</label>
              <button class="destroy"></button>
            </div>
          </li>
          <li class="">
            <div class="view">
              <input class="toggle" type="checkbox" />
              <label>睡觉</label>
              <button class="destroy"></button>
            </div>
          </li>
        </ul>
      </section>
      <!-- {/* 底部 */} -->
      <footer class="footer">
        <span class="todo-count"> <strong>1</strong> 剩余 </span>
        <ul class="filters">
          <li>
            <a class="all selected" href="#/"> 全部 </a>
          </li>
          <li>
            <a class="active" href="#/active"> 未完成 </a>
          </li>
          <li>
            <a class="completed" href="#/completed"> 已完成 </a>
          </li>
        </ul>
        <button class="clear-completed">清除已完成</button>
      </footer>
    </section>
  </body>
</html>
